<!-- 公共聊天页面 -->
<template>
  <el-container
    style="
      background-color: #f6f7f8;
      height: 75vh;
      border: 1px grey solid;
      border-radius: 4px;
    "
    v-loading="dataLoading"
    element-loading-text="拼命加载中"
  >
    <el-header style="text-align: center; border-bottom: solid grey 1px">
      <div style="margin-top: 15px; display: inline-block">
        {{ $route.query.yourName }}
      </div>
    </el-header>

    <el-main style="padding: 0px">
      <div ref="window" style="height: 62vh; overflow-y: auto">
        <div v-for="item in chatData" :key="item.recordId">
          <template v-if="item.sendRole != 'admin'">
            <div style="font-size: small; color: gray; text-align: center">
              {{ getMoment(new Date(item.chatTime)) }}
            </div>
            <el-avatar :src="yourInfo.headIcon"></el-avatar>
            <div
              class="msg"
              style="margin-left: 5px; border-radius: 0 9px 9px 9px"
            >
              {{ item.chatInfo }}
            </div>
          </template>
          <template v-else>
            <div style="text-align: end">
              <div
                class="msg"
                style="border-radius: 9px 0px 9px 9px; margin-right: 5px"
              >
                {{ item.chatInfo }}
              </div>
              <!-- <el-avatar
                :src="
                  require(`/../static/hr/headIconImg/${$store.state.headIcon}`)
                "
              ></el-avatar> -->
            </div>
          </template>
        </div>
      </div>
    </el-main>

    <el-footer
      style="
        border-top: solid grey 1px;
        text-align: center;
        height: fit-content;
      "
    >
      <el-input
        type="textarea"
        resize="none"
        autosize
        placeholder="请输入内容"
        v-model="msg.chatInfo"
        clearable
        style="
          width: 35vw;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
        "
      >
      </el-input>

      <el-button
        type="primary"
        size="mini"
        plain
        style="margin: 13px 15px"
        @click="sendMsg()"
        >发送消息</el-button
      >
    </el-footer>
  </el-container>
</template>

<script>
import { getConcretChat, getDraft, updateDraft, write } from "@/api/chat";
import moment from "moment";

export default {
  data() {
    return {
      dataLoading: false,
      //这个信息用切换路由初始化
      yourInfo: {
        adminId: null,
        // name: "HR",
        headIcon:
          "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      },
      msg: {
        sendRole: "admin",
        sendId: this.$store.state.adminId,
        receiveRole: "hr",
        receiveId: null,
        chatInfo: "",
        chatType: 0,
        isRead: 0,
      },
      commonExpression: [],
      chatData: [],
    };
  },
  methods: {
    getMoment(time) {
      const now = moment();
      const chatMoment = moment(time);
      if (chatMoment.isSame(now, "day")) {
        return `今天${chatMoment.format("HH:mm")}`;
      } else if (chatMoment.isSame(now.clone().subtract(1, "day"), "day")) {
        return `昨天${chatMoment.format("HH:mm")}`;
      } else {
        return chatMoment.format("YYYY-MM-DD-HH:mm");
      }
    },
    handleCommand(command) {
      this.msg.chatInfo += command;
    },
    sendMsg() {
      write(this.msg).then((res) => {
        this.getInfoScroll();
        this.msg.chatInfo = "";
      });
      // 通过socket触发write，而不是axios触发，就用下面
      // this.$store.dispatch("sendMsg",this.msg)
    },
    //获取信息并初始化
    getInfo() {
      this.yourInfo.adminId = this.$route.params.id;
      this.msg.receiveId = this.$route.params.id;
      this.dataLoading = true;
      getConcretChat({
        myRole: "admin",
        myId: this.$store.state.adminId,
        yourRole: "hr",
        yourRoleId: this.$route.params.id,
      }).then((res) => {
        this.chatData = res.data;
      });
    },
    // 获取信息并 滚动条移动到底部
    getInfoScroll() {
      this.yourInfo.adminId = this.$route.params.id;
      this.msg.receiveId = this.$route.params.id;
      this.dataLoading = true;
      getConcretChat({
        myRole: "admin",
        myId: this.$store.state.adminId,
        yourRole: "hr",
        yourRoleId: this.$route.params.id,
      }).then((res) => {
        this.dataLoading = false;

        this.chatData = res.data;
        setTimeout(() => {
          this.$refs.window.scrollTop = this.$refs.window.scrollHeight;
        }, 500);
      });
    },
  },
  updated() {},
  mounted() {
    this.getInfoScroll();
    getDraft({
      myRole: "admin",
      myId: this.$store.state.adminId,
      yourRole: "hr",
      yourRoleId: this.$route.params.id,
    }).then((res) => {
      this.msg.chatInfo = res.data;
    });
  },
  beforeDestroy() {
    // 把草稿更新到后端
    updateDraft(this.msg).then((res) => {});
  },

  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
      //把上一个页面草稿更新到后端
      updateDraft(this.msg).then((res) => {});

      this.getInfoScroll();
      this.msg.chatInfo = "";
      // 得到下一个页面的草稿
      getDraft({
        myRole: "admin",
        myId: this.$store.state.adminId,
        yourRole: "hr",
        yourRoleId: this.$route.params.id,
      }).then((res) => {
        this.msg.chatInfo = res.data;
      });
    },
  },
};
</script>

<style>
.msg {
  display: inline-block;
  width: fit-content;
  background-color: white;
  padding: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.04);
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>